<template>
  <el-select :class="{'loading':loading}" v-model="id" :clearable="clearable" :disabled="disabled" :multiple="multiple" @clear="clear" :multiple-limit="limit" filterable remote :placeholder="placeholder" :remote-method="remoteMethod" :loading="loading" @change="selectChange">
    <el-option v-for="item in list" :key="item.id" :label="item.realName" :value="item.id" :disabled="item.disabled">
      <span>{{ item.realName}}</span> <span style="color: #aaa;" v-if="item.loginName">({{ item.loginName }})</span>
    </el-option>
  </el-select>
</template>

<script>
export default {
  props: {
    value: "",
    clearable: {
      type: Boolean,
      default: true,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    limit: {
      type: Number,
      default: 0,
    },
    default: {
      type: Array,
      default: () => { return [] },
    },
    deptId: "",
    placeholder: {
      type: String,
      default: "请输入姓名或账号",
    },
    deptLoad: {
      type: Boolean,
      default: false,
    },
    optionsDisabled: {
      type: Array,
      default: () => { return [] },
    },
    roleCode: "",
    tenant: "",
  },
  data() {
    return {
      list: [],
      id: "",
      loading: false,
      isFirst: true,
    }
  },
  created() {
    this.id = this.value;
    this.list = this.default || [];
  },
  mounted() {
    if (this.default.length == 0 || this.value) {
      this.init();
    }
    setTimeout(() => {
      this.isFirst = false;
    }, 200);
  },
  watch: {
    value: function (newValue) {
      this.id = newValue;
      if (this.isFirst) {
        this.init();
      }
    },
    default: function (newValue) {
      this.list = newValue;
    },
    deptId() {
      if (!this.isFirst) {
        this.list = [];
        this.id = "";
        this.$emit('input', "");
      }
      this.init();
    },
    tenant() {
      if (!this.isFirst) {
        this.list = [];
        this.id = "";
        this.$emit('input', "");
      }
      this.init();
    }
  },
  methods: {
    init() {
      if (this.deptLoad && !this.deptId) {
        return;
      }
      this.remoteMethod(this.id || "");
    },
    clear() {
      this.id = "";
      this.remoteMethod(this.id);
    },
    remoteMethod(query) {
      this.loading = true;
      let params = {
        "key": query,
        "pageIndex": 1,
        "pageSize": 50,
        "deptId": this.deptId || "",
        "roleCode": this.roleCode || "",
        "tenantCode": this.tenant || "",
      }
      this.list = [];
      this.loading = true;
      this.https("get", "/api/User/GetUserList", params).then(res => {
        this.loading = false;
        this.list = res.response.data || [];
        // if(this.deptId === null){
        //   this.list = this.list.filter(item=>item.deptId === null);
        // }
        if (this.optionsDisabled.length > 0) {
          this.list.map(item => {
            if (this.optionsDisabled.indexOf(item.id) >= 0) {
              item.disabled = true;
            } else {
              item.disabled = false;
            }
          })
        }
      }).catch(res => {
        this.loading = false;
      })
    },
    selectChange(val) {
      this.$emit('input', val);
      let data = this.list.find(item => item.id == val);
      this.$emit('change', data);
    },
  }
}
</script>
<style lang="scss">
.el-select.loading > .el-input::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  right: 2px;
  bottom: 2px;
  background-color: #fff;
}
</style>